<template>
	<view class="accountDetail"  v-if="user">
		<view class="brokerage-widthdraw">
			<view>佣金提现（可提现金额¥{{user.dividend_brokerage}}）</view>
			<view class="withdraw" @click="goMyWithdraw()">
				<view>去提现</view>
				<image src="/static/images/right-black-icon.png"></image>
			</view>
		</view>
		<view class="date-box">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"  ref="datetimePicker" />
		</view>
		<view class="balance-desc">
			<view>佣金合计 ¥{{money}}</view>
		</view>
		<view class="accountDetailList">
			<view class="account-detail-item" v-for="(item,index) in pageItems" :key="index">
				<view class="brokerage-top">
					<view>下单时间：{{item.created_at}}</view>
					<view>佣金：¥{{item.money}}</view>
				</view>
				<view class="brokerage-desc">
					<image src="/static/images/blind-box-background.png" class="vip-image"  mode=""></image>
					<view class="brokerage-item">
						
						<view class="brokerage-item-top">
							  <view class="box" v-if="item.order && item.order.is_box">盲箱</view>
							<view class="box" v-if="item.order && item.order.is_drink">畅饮提货</view>
							<view v-if="item.order" class="title">{{ item.order.items[0].product_title }}</view>
							<view v-if="item.remark == 'pay_vip_purchase'" class="title">热克拉伯无限畅饮年卡会员</view>
						</view>
						<view class="brokerage-item-bottom">
							<view class="logo">热-CLUB</view>
							<view class="product_price"  v-if="item.order && item.order.items[0].price">¥{{ item.money }}</view>
							<view class="true-price">实付价 <text> ¥{{ item.money }}</text></view>
						</view>
					</view>
					
				</view>
				
				
			</view>
		</view>
		<view class="no-more" v-if="pageHasNoMore">
		  --- 没有更多数据了 ---
		</view>
		<!-- <view class="webtips">--此网页由<text style="margin:0 10rpx">shopwap.littleshop.shop</text>提供--</view> -->
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations} from 'vuex'
	import { getUserBrokerages,getUser } from "api/userApi"
	import { getBrokeragesTotal } from "api/brokerageApi"
	import Pagination from "mixins/Pagination"
	export default {
		store,
		mixins:[Pagination],
		computed:{
			...mapGetters([
				'statusBar',
				'user',
				'isLogin'
			])
		},
		data(){
			return {
				'datetimerange':[],
				'money':0,
			}
		},
		watch: {
			datetimerange(newval) {
				this.pageNumber = 1
				this.pageHasNoMore = false
				this.loadPageData()
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			goMyWithdraw() {
			  uni.navigateTo({url: `/packs/pages/withdrawal/withdrawDetail`})
			},
			async getUser(){
				let response =  await getUser()
				this.setUser(response)
			},
			async loadPageItems() {
				let start_time = this.datetimerange[0];
				let end_time = this.datetimerange[1];
			   let response =  await getUserBrokerages({page: this.pageNumber,start_time:start_time,end_time:end_time});
			   let total =  await getBrokeragesTotal({page: this.pageNumber,start_time:start_time,end_time:end_time});
			   let res = response.data;
			   this.money = total.total;
			   if(res.data){
				   res.meta = {
				   	  'current_page' : res.current_page,
					  'last_page' : res.last_page
				   				   
				   } 	
				   
			   }
			   return res;
			 
			},
			back(){
				uni.navigateBack()
				
			}
		},
		async onShow() {
			if(await this.isLogin){
				await this.getUser();
				await this.loadPageData();
				
			}
			
			
		}
	}
</script>

<style lang="scss" scoped>
	
	/* 时间范围选择 */
	.date-box{
		margin-bottom: 26rpx;
	}
	/deep/.uni-date-x{
		justify-content:flex-start;
		border-radius: 16rpx;
		padding: 0 5rpx 0 10rpx;
		font-size: 26rpx;
	}
	/deep/.uni-date-x--border{
		border-radius: 16rpx;
		border: 1rpx solid #dcdfe6;
	}
	/deep/.uni-date__x-input{
		width: 270rpx;
		font-size: 26rpx;
		padding: 0 5rpx;
	}
	/deep/.uni-datetime-picker--btn{
		background-color: #FE354B;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--before-checked{
		background-color: #FF487A;
	}
	/deep/.uni-calendar-item__weeks-box .uni-calendar-item--checked{
		background-color: #FF487A;
	}
	/deep/.uni-calendar-item--multiple .uni-calendar-item--after-checked{
		background-color: #FF487A;
	}
	/deep/.uni-calendar-item__weeks-box-text{
		color: #333333;
	}
	page{
		background: #FFFFFF;
	}
	.accountDetail{
		min-height:90vh;
		position: relative;
		background: #F6F6F6; 
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.account-detail-item{
		
		height: 268rpx;
		width:718rpx;
		position:relative;
		margin:0rpx auto 16rpx;
		background:#fff;
		
		.brokerage-top{
			overflow:hidden;
			height:70rpx;
			line-height:70rpx;
			border-bottom:2rpx solid #f2f2f2;
			>view:nth-child(1){
				font-size:26rpx;
				color:#a1a1a1;
				float:left;
				margin-left:12rpx;
			}
			>view:nth-child(2){
				font-size:24rpx;
				color:#EF8235;
				float:right;
				margin-right:14rpx;
				
			}
		}
		
		.brokerage-desc{
			display:block;
			overflow: hidden;
			.brokerage-item{
				float:left;
				margin-top:16rpx;
				width:510rpx;
				.brokerage-item-top{
					overflow: hidden;
					.box{
						border:2rpx solid #333;
						font-size:22rpx;
						float:left;
						border-radius:1rpx;
						height:30rpx;
						line-height:30rpx;
						padding:0rpx 16rpx;
						margin-left:4rpx;
					}
					.title{
						float:left;
						margin-left:20rpx;
						font-size:26rpx;
						color:#333;
						font-weight:600;
					}
					
				}
				.brokerage-item-bottom{
					overflow: hidden;
					margin-top:74rpx;
					.logo{
						width:128rpx;
						height:46rpx;
						line-height:46rpx;
						margin-left:16rpx;
						background:#D84C29;
						font-size:24rpx;
						color:#fff;
						float:left;
						text-align: center;
					}
					.product_price{
						float:left;
						margin-left:16rpx;
						font-size:26rpx;
						color:#333;
						margin-top:4rpx;
					}
					.true-price{
						font-size:26rpx;
						float:right;
						margin-top:4rpx;
						>text{
							font-weight:600;
							margin-left:4rpx;
						}
					}
				}
				
			}
		}
		
	}
	.no-more {
	  width: 100%;
	  font-size: 24rpx;
	  text-align: center;
	  color: #cccccc;
		line-height: 80rpx;
	}
	.accountDetailList{
		margin-top: 40rpx;
	}
	.webtips{
		position: absolute;
		left:0;
		bottom:120rpx;
		width: 100%;
		height: 40rpx;
		font-size: 20rpx;
		color: #999999;
		text-align: center;
	}
	.balance-desc{
		display:flex;
		font-size:28rpx;
		color:#333;
		margin-left:28rpx;
		>view:nth-child(1){
			margin-right:30rpx;
		}
	}
	.vip-image{
		width:188rpx;
		height:160rpx;
		margin-left:12rpx;
		margin-top:16rpx;
		float:left;
	}
	.item-active{
		color:#333 !important;
	}
	.right-black-icon{
		width:100%;
		height:98rpx;
		display:flex;
	}
	.withdraw{
		margin-right:28rpx;
		display:flex;
		align-items: center;
		justify-content: flex-end;
		float:right;
		>view{
			font-size:28rpx;
			margin-right:12rpx;
		}
		>image{
			width:16rpx;
			height:22rpx;
		}
	}
	.brokerage-widthdraw{
		overfloat:hidden;
		height:98rpx;
		line-height:98rpx;
		width:718rpx;
		margin:16rpx auto 36rpx;
		>view:nth-child(1){
			margin-left:16rpx;
			float:left;
		}
	}
</style>
